"use strict";

// XML基本语法
const List1 = () => (
    <div>
        <Title>title</Title>
        <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>
);

{
  tag: "div",
  id: "a1",
  className: "a1",
  text: "",
  children: [
    {
      tag: "div",
      className: "a2",
      text: "12345",
      children: []
    }
  ]
}
=>
<div id="a1" className="a1">
  <div class="a2">12345</div>
</div>

/**
 * 要点：
 * 1）定义标签时需要一个最外层标签，且只允许一个标签包裹。
 * 2）标签一定要闭合。
 * **/


// 元素类型
const Title = () => (
    <h2>title</h2>
);
const List2 = () => (
    <div>
        <Title>title</Title>
        <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>
);
/**
 * 要点：
 * 1) dom元素小写，而组件开头要大写。
 * **/

// 注释
const App = () => (
    <h2 /*
         * 这里是多行注释
         * 这里是多行注释
         * */>
        { /* 这里是节点注释 */ }
        title
    </h2>
);

// 元素属性
// 1) class属性
const Attr1 = <div className="class-name"></div>;
// 2) boolean属性
// false形式
const Attr2 = <div data-checked={ false }></div>;
// 等同于
const Attr3 = <div data-checked></div>;
// true形式
const Attr4 = <div data-checked={ true }></div>;
// 3) 属性展开
// 反模式(缺点没法使用propTypes)
const Attr5 = <div></div>;
Attr5.props.dataChecked = true;
// ES6 rest/spread
const data = { dataChecked: true,name: "name" };
const Attr6 = <div {...data}>  </div>;  // 等同于 <div data-checked="true" name="name"></div>;
// 4) Attr属性
// DOM 不接受自定义属性
// EG: <div name="true"></div> => <div></div>
// EG: <div data-name="true"></div data-name="true"> => <div></div>
// 组件属性接收所有的命名属性
// EG: <Title name="true"></Title> => <Title name="true"></Title>
